import { StyleSheet, ScrollView, Alert, Linking, Pressable } from 'react-native';
import { router } from 'expo-router';
import FontAwesome from '@expo/vector-icons/FontAwesome';

import { Text, View } from '@/components/Themed';
import Colors from '@/constants/Colors';
import { useColorScheme } from '@/components/useColorScheme';

export default function HelpScreen() {
  const colorScheme = useColorScheme();

  const handleContact = (method: string) => {
    Alert.alert('联系客服', `选择联系方式: ${method}`, [
      { text: '确定', onPress: () => console.log(method) },
      { text: '取消', style: 'cancel' },
    ]);
  };

  const handleOpenLink = (url: string) => {
    Linking.openURL(url).catch(err => {
      Alert.alert('错误', '无法打开链接');
    });
  };

  const HelpItem = ({ 
    icon, 
    title, 
    description, 
    onPress,
    showArrow = true
  }: {
    icon: string;
    title: string;
    description: string;
    onPress: () => void;
    showArrow?: boolean;
  }) => (
    <Pressable style={styles.helpItem} onPress={onPress}>
      <View style={styles.helpLeft}>
        <FontAwesome 
          name={icon as any} 
          size={20} 
          color={Colors[colorScheme ?? 'light'].text} 
        />
        <View style={styles.helpText}>
          <Text style={styles.helpTitle}>{title}</Text>
          <Text style={styles.helpDescription}>{description}</Text>
        </View>
      </View>
      {showArrow && (
        <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
      )}
    </Pressable>
  );

  const ContactButton = ({ 
    icon, 
    title, 
    subtitle, 
    onPress 
  }: {
    icon: string;
    title: string;
    subtitle: string;
    onPress: () => void;
  }) => (
    <Pressable style={styles.contactButton} onPress={onPress}>
      <FontAwesome 
        name={icon as any} 
        size={24} 
        color="#007AFF" 
      />
      <View style={styles.contactText}>
        <Text style={styles.contactTitle}>{title}</Text>
        <Text style={styles.contactSubtitle}>{subtitle}</Text>
      </View>
    </Pressable>
  );

  return (
    <ScrollView style={styles.container}>
      <View style={styles.content}>
          {/* 常见问题 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>常见问题</Text>
            <View style={styles.sectionContent}>
              <HelpItem
                icon="question-circle"
                title="如何注册账户？"
                description="了解账户注册流程"
                onPress={() => Alert.alert('帮助', '注册账户的详细步骤...')}
              />
              
              <HelpItem
                icon="key"
                title="忘记密码怎么办？"
                description="重置密码的方法"
                onPress={() => Alert.alert('帮助', '重置密码的详细步骤...')}
              />
              
              <HelpItem
                icon="credit-card"
                title="如何充值？"
                description="账户充值指南"
                onPress={() => Alert.alert('帮助', '充值的详细步骤...')}
              />
              
              <HelpItem
                icon="exchange"
                title="如何交易？"
                description="交易操作指南"
                onPress={() => Alert.alert('帮助', '交易的详细步骤...')}
              />
            </View>
          </View>

          {/* 联系客服 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>联系客服</Text>
            <View style={styles.contactGrid}>
              <ContactButton
                icon="phone"
                title="电话客服"
                subtitle="400-123-4567"
                onPress={() => handleContact('电话客服')}
              />
              
              <ContactButton
                icon="wechat"
                title="微信客服"
                subtitle="在线即时回复"
                onPress={() => handleContact('微信客服')}
              />
              
              <ContactButton
                icon="envelope"
                title="邮件支持"
                subtitle="support@example.com"
                onPress={() => handleContact('邮件支持')}
              />
              
              <ContactButton
                icon="comments"
                title="在线客服"
                subtitle="7x24小时服务"
                onPress={() => handleContact('在线客服')}
              />
            </View>
          </View>

          {/* 帮助文档 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>帮助文档</Text>
            <View style={styles.sectionContent}>
              <HelpItem
                icon="book"
                title="用户手册"
                description="完整的使用指南"
                onPress={() => handleOpenLink('https://example.com/manual')}
              />
              
              <HelpItem
                icon="video-camera"
                title="视频教程"
                description="观看操作演示"
                onPress={() => handleOpenLink('https://example.com/tutorials')}
              />
              
              <HelpItem
                icon="file-text"
                title="API文档"
                description="开发者接口文档"
                onPress={() => handleOpenLink('https://example.com/api')}
              />
            </View>
          </View>

          {/* 关于我们 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>关于我们</Text>
            <View style={styles.sectionContent}>
              <HelpItem
                icon="info-circle"
                title="应用信息"
                description="版本 1.0.0"
                onPress={() => Alert.alert('应用信息', '版本: 1.0.0\n构建: 2024.01.01')}
                showArrow={false}
              />
              
              <HelpItem
                icon="star"
                title="评价应用"
                description="在应用商店给我们评分"
                onPress={() => handleOpenLink('https://apps.apple.com/app/example')}
              />
              
              <HelpItem
                icon="share"
                title="分享应用"
                description="推荐给朋友"
                onPress={() => Alert.alert('分享', '分享应用给朋友')}
              />
            </View>
          </View>

          {/* 法律信息 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>法律信息</Text>
            <View style={styles.sectionContent}>
              <HelpItem
                icon="file-text"
                title="服务条款"
                description="查看服务使用条款"
                onPress={() => handleOpenLink('https://example.com/terms')}
              />
              
              <HelpItem
                icon="shield"
                title="隐私政策"
                description="了解我们如何保护您的隐私"
                onPress={() => handleOpenLink('https://example.com/privacy')}
              />
              
              <HelpItem
                icon="gavel"
                title="免责声明"
                description="风险提示和免责条款"
                onPress={() => handleOpenLink('https://example.com/disclaimer')}
              />
            </View>
          </View>
        </View>
      </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    padding: 16,
  },
  section: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 12,
    paddingHorizontal: 4,
  },
  sectionContent: {
    backgroundColor: 'white',
    borderRadius: 8,
    overflow: 'hidden',
  },
  helpItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  helpLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  helpText: {
    marginLeft: 12,
    flex: 1,
  },
  helpTitle: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 2,
  },
  helpDescription: {
    fontSize: 14,
    color: '#666',
  },
  contactGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  contactButton: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    alignItems: 'center',
    width: '48%',
    marginBottom: 12,
  },
  contactText: {
    marginTop: 8,
    alignItems: 'center',
  },
  contactTitle: {
    fontSize: 14,
    fontWeight: '600',
    marginBottom: 2,
  },
  contactSubtitle: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
  },
});
